<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>所有人的博客列表</title>
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/list.css" />
    <script src="js/url_handler.js"></script>
    <!-- 引入jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link rel="icon" href="img/logo1.png" type="image/x-icon" />
    <style>
      .blog-pagnation-wrapper {
        background-color: rgba(255, 255, 255, 0.8);
        height: 40px;
        margin: 16px 0;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .blog-pagnation-item {
        display: inline-block;
        padding: 8px;
        border: 1px solid #d0d0d5;
        color: #333;
      }
      .blog-pagnation-item:hover {
        background: rgb(252, 133, 167);
        color: #fff;
      }
      .blog-pagnation-item.actvie {
        background: rgb(252, 133, 167);
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="navigation">
      <!-- 头像 -->
      <img src="img/logo1.png" />
      <div class="title">我的博客系统</div>

      <div class="space"></div>

      <a id="mine" href="myblog_lists.html">我的博客</a>
      <a id="add" href="blog_add.html">写博客</a>
      <a id="logout" href="blog_login.html">退出登录</a>
    </div>

    <!-- 页面主体 -->
    <div class="container">
      <div class="container-right" style="width: 100%">
        <div class="article" style="height: 90%">
          <!-- <div class="blog">
            <div class="thing">
              <img src="img/avatar.png" />
              <div class="title">xxx</div>
            </div>
            <div class="date">xxx 阅读量：xxx</div>
            <div class="content">xxx</div>
            <a href="#">查看正文</a>
          </div>
         -->
        </div>
        <div class="blog-pagnation-wrapper">
          <button class="blog-pagnation-item" onclick="tofirst()">首页</button>
          <button class="blog-pagnation-item" onclick="toPrev()">上一页</button>
          <button class="blog-pagnation-item" onclick="toNext()">下一页</button>
          <button class="blog-pagnation-item" onclick="toLast()">末页</button>
          <div id="tip"></div>
          <input id="pmax" type="text" style="display: none" />
        </div>
      </div>
    </div>

    <script>
      var psize = 2;
      var pindex = 1;
      var count = 10;

      // 初始化数据
      function init() {
        // 1. 得到url的分页相关的参数
        psize = getParamValue("psize");
        pindex = getParamValue("pindex");
        if (psize == null || parseInt(psize) == NaN || psize < 2) {
          psize = 2;
        }
        if (pindex == null || parseInt(pindex) == NaN || pindex < 1) {
          pindex = 1;
        }
        var pMax = (1.0 * count) / psize;
        if (parseInt(pMax) != pMax) {
          pMax = parseInt(pMax) + 1;
        }
        jQuery("#tip").text(
          "（当前在第 " + pindex + " 页，共 " + pMax + " 页）"
        );
        jQuery("#pmax").val(pMax);
        if (pMax < pindex) {
          tofirst();
        }

        // 2. 显示文章，构造博客html元素
        if (count == 0) {
          jQuery(".article").append(
            jQuery('<h1 style="color: slateblue">暂无文章</h1>')
          );
          jQuery("#tip").text("（当前在第 " + 0 + " 页，共 " + 0 + " 页）");
          return 0;
        }
        var number =
          count - (pindex - 1) * psize > psize
            ? psize
            : count - (pindex - 1) * psize;
        for (i = 0; i < number; i++) {
          var art = '<div class="blog">';
          art += '<div class="thing">';
          art += '<img src="' + "img/headurl.jpeg" + '"/>';
          art +=
            '<div class="title">' +
            "【Lorem】(" +
            pindex +
            ", " +
            i +
            ")" +
            "</div></div>";
          art +=
            '<div class="date">' +
            "2023-12-6 11:11:11" +
            " 阅读量：" +
            i * 111 +
            "</div>";
          art += '<div class="content">' + "lorem" + "</div>";
          art +=
            '<a href="blog_detail.html?aid=' +
            (i + (pindex - 1) * psize) +
            '">查看正文</a>';

          art += "</div>";
          jQuery(".article").append(jQuery(art));
        }
      }
      init();
      function tofirst() {
        if (pindex == 1) {
          alert("已在首页！");
          location.href = location.href;
        } else {
          location.href = "blog_lists.html?pindex=1&psize=" + psize;
        }
      }
      function toLast() {
        if (pindex == jQuery("#pmax").val()) {
          alert("已在末页！");
          location.href = location.href;
        } else {
          location.href =
            "blog_lists.html?pindex=" +
            jQuery("#pmax").val() +
            "&psize=" +
            psize;
        }
      }
      function toPrev() {
        if (pindex <= 1) {
          alert("已在首页!");
          location.href = location.href;
        } else {
          location.href =
            "blog_lists.html?pindex=" +
            (parseInt(pindex) - 1) +
            "&psize=" +
            psize;
        }
      }
      function toNext() {
        if (pindex >= jQuery("#pmax").val()) {
          alert("已在末页!");
          location.href = location.href;
        } else {
          location.href =
            "blog_lists.html?pindex=" +
            (parseInt(pindex) + 1) +
            "&psize=" +
            psize;
        }
      }
    </script>
  </body>
</html>
